import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import QtQml 2.15
import '../../../component'

Frame {
	property int current: 0
	property alias bannerList: bannerView.model
	
	PathView {
		id: bannerView
		width: parent.width
		height: parent.height
		clip: true
		delegate: Item {
			id: delegateItem
			width: bannerView.width * 0.7
			height: bannerView.height
			z: PathView.z ? PathView.z : 0
			scale: PathView.scale ? PathView.scale : 1.0
			MusicRoundImage {
				id: iamge
				source: modelData.imageUrl
				width: delegateItem.width
				height: delegateItem.height
			}
			MouseArea {
				anchors.fill: parent
				cursorShape: Qt.PointingHandCursor
				onClicked: {
					if (bannerView.currentIndex === index) {
					
					} else {
						bannerView.currentIndex = index
					}
				}
			}
		}
		pathItemCount: 3
		path: bannerPath
		preferredHighlightBegin: 0.5
		preferredHighlightEnd: 0.5
		MouseArea {
			anchors.fill: parent
			hoverEnabled: true
			cursorShape:Qt.PointHandCursor
			onEntered: {
				bannerTimer.stop()
			}
			onExited: {
				bannerTimer.start()
			}
		}
	}
	Timer {
		id: bannerTimer
		repeat: true
		running: true
		interval: 3000
		onTriggered: {
			if (bannerView.count > 0) {
				bannerView.currentIndex = (bannerView.currentIndex + 1) % bannerView.count
			}
		}
	}
	Path {
		id: bannerPath
		startX: 0
		startY: bannerView.height / 2
		
		PathAttribute {
			name: 'z'
			value: 0
		}
		PathAttribute {
			name: 'scale'
			value: 0.6
		}
		PathLine {
			x: bannerView.width / 2
			y: bannerView.height / 2
		}
		PathAttribute {
			name: 'z'
			value: 2
		}
		PathAttribute {
			name: 'scale'
			value: 0.85
		}
		PathLine {
			x: bannerView.width
			y: bannerView.height / 2
		}
		PathAttribute {
			name: 'z'
			value: 0
		}
		PathAttribute {
			name: 'scale'
			value: 0.6
		}
	}
	PageIndicator {
		id: indicator
		anchors {
			top: bannerView.bottom
			horizontalCenter: bannerView.horizontalCenter
		}
		count: bannerView.count
		currentIndex: bannerView.currentIndex
		spacing: 10
		delegate: Rectangle {
			width: 20
			height: 5
			radius: 5
			color: index === bannerView.currentIndex ? Qt.color('black') : Qt.color('gray')
			Behavior on color {
				ColorAnimation {
					duration: 200
				}
			}
			MouseArea {
				anchors.fill: parent
				hoverEnabled: true
				cursorShape:Qt.PointHandCursor
				onEntered: {
					bannerView.currentIndex = index
					bannerTimer.stop()
				}
				onExited: {
					bannerTimer.start()
				}
			}
		}
	}
}


